import React, { useEffect, useState } from "react";
import * as Icon from "@ant-design/icons";
import { useDispatch, useSelector } from "react-redux";
import { getMenus } from "@/store/mock/menus.js";
import { getMenusList } from "@/store/modules/menusStore";
import { addTagList } from "@/store/modules/settingStore";
import Logo from "@/pages/components/Logo";
import { Layout, Menu, message } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import Password from "antd/es/input/Password";
const { Sider } = Layout;
const Aside = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useDispatch();
  const pathnameArr = location.pathname.split('/')
  let defOpenKeys = ''
  let selKeys = ''
  if (pathnameArr.length >= 3) {
    defOpenKeys = [`/${pathnameArr[1]}`]
  }
  selKeys = [location.pathname]
  let [defaultOpenKeys, setDefaultOpenKeys] = useState(defOpenKeys);
  let [selectedKeys, setSelectedKeys] = useState(selKeys);
  let [menusList, setMenusList] = useState([]);
  const iconToElement = (name) => React.createElement(Icon[name]);
  useEffect(() => {
    console.log('useEffect')
    async function getMenusEvent() {
      const params = {
        username: 'admin',
        password: 'admin'
      }
      const result = getMenus(params)
      console.log('result', result)
      let menusList
      if (result.code == 1) {
        menusList = result.data;
      } else {
        message.info(result.message)
      }
      menusList.map((item) => {
        item.icon = iconToElement(item.icon);
        item.key = item.path;
        if (item.children && item.children.length) {
          item.children.forEach((childItem) => {
            if (childItem.icon) {
              childItem.icon = iconToElement(childItem.icon);
            }
            childItem.key = `${item.key}${childItem.path}`;
          });
        }
      });
      console.log("menusList", menusList);
      setMenusList(menusList);
    }
    getMenusEvent();
  }, []);

  let collapsedValue = useSelector((state) => state.setting.collapsed);
  let mainColor = useSelector((state) => state.color.mainColor);
  
  const selectMenusItem = (e) => {
    console.log('e', e)
    let data
    menusList.forEach(item => {
      console.log('item.path', item.path)
      console.log('e.keyPath[e.keyPath.length - 1]', e.keyPath[e.keyPath.length - 1])
      if (item.path === e.keyPath[e.keyPath.length - 1]) {
        if (e.keyPath.length > 1) {
          data = item.children.find(childItem => {
            return childItem.url == e.key
          })
        } else {
          data = item
        }
      }
    })
    console.log('data',data)
    dispatch(addTagList({
      path: data.path,
      name: data.name,
      label: data.label,
      url: data.url
    }))
    setSelectedKeys([e.key])
    navigate(e.key)
  }

  return (
    <Sider
      style={{ background: mainColor, color: "white" }}
      trigger={null}
      collapsible
      collapsed={collapsedValue}
    >
      <div className="logoBox flex flex-row align-center text-center">
        <Logo></Logo>
      </div>
      {/* selectedKeys={selectedKeys} */}
        {/* defaultOpenKeys={defaultOpenKeys} */}
      <Menu
        selectedKeys={selectedKeys}
        defaultOpenKeys={defaultOpenKeys}
        style={{
          height: "100%",
        }}
        theme="dark"
        mode="inline"
        items={menusList}
        onClick={selectMenusItem}
      />
    </Sider>
  );
};
export default Aside;
